
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Data Flow · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="UsageWithReact.html" />
    
    
    <link rel="prev" href="Store.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../introduction/">
            
                <a href="../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../introduction/Motivation.html">
            
                <a href="../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../introduction/CoreConcepts.html">
            
                <a href="../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../introduction/ThreePrinciples.html">
            
                <a href="../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../introduction/PriorArt.html">
            
                <a href="../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../introduction/Ecosystem.html">
            
                <a href="../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../introduction/Examples.html">
            
                <a href="../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="./">
            
                <a href="./">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Actions.html">
            
                <a href="Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Reducers.html">
            
                <a href="Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Store.html">
            
                <a href="Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.4" data-path="DataFlow.html">
            
                <a href="DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="UsageWithReact.html">
            
                <a href="UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ExampleTodoList.html">
            
                <a href="ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../advanced/">
            
                <a href="../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../advanced/AsyncActions.html">
            
                <a href="../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../advanced/AsyncFlow.html">
            
                <a href="../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../advanced/Middleware.html">
            
                <a href="../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../advanced/UsageWithReactRouter.html">
            
                <a href="../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../advanced/ExampleRedditAPI.html">
            
                <a href="../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../recipes/">
            
                <a href="../recipes/">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../recipes/MigratingToRedux.html">
            
                <a href="../recipes/MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../recipes/UsingObjectSpreadOperator.html">
            
                <a href="../recipes/UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../recipes/ReducingBoilerplate.html">
            
                <a href="../recipes/ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../recipes/ServerRendering.html">
            
                <a href="../recipes/ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../recipes/WritingTests.html">
            
                <a href="../recipes/WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../recipes/ComputingDerivedData.html">
            
                <a href="../recipes/ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../recipes/ImplementingUndoHistory.html">
            
                <a href="../recipes/ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../recipes/IsolatingSubapps.html">
            
                <a href="../recipes/IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../recipes/StructuringReducers.html">
            
                <a href="../recipes/StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="../recipes/reducers/PrerequisiteConcepts.html">
            
                <a href="../recipes/reducers/PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="../recipes/reducers/BasicReducerStructure.html">
            
                <a href="../recipes/reducers/BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="../recipes/reducers/SplittingReducerLogic.html">
            
                <a href="../recipes/reducers/SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="../recipes/reducers/RefactoringReducersExample.html">
            
                <a href="../recipes/reducers/RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="../recipes/reducers/UsingCombineReducers.html">
            
                <a href="../recipes/reducers/UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="../recipes/reducers/BeyondCombineReducers.html">
            
                <a href="../recipes/reducers/BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="../recipes/reducers/NormalizingStateShape.html">
            
                <a href="../recipes/reducers/NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="../recipes/reducers/UpdatingNormalizedData.html">
            
                <a href="../recipes/reducers/UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="../recipes/reducers/ReusingReducerLogic.html">
            
                <a href="../recipes/reducers/ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                <a href="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="../recipes/reducers/InitializingState.html">
            
                <a href="../recipes/reducers/InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../recipes/UsingImmutableJS.html">
            
                <a href="../recipes/UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../FAQ.html">
            
                <a href="../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../faq/General.html">
            
                <a href="../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../faq/Reducers.html">
            
                <a href="../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../faq/OrganizingState.html">
            
                <a href="../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../faq/StoreSetup.html">
            
                <a href="../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../faq/Actions.html">
            
                <a href="../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../faq/ImmutableData.html">
            
                <a href="../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../faq/CodeStructure.html">
            
                <a href="../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../faq/Performance.html">
            
                <a href="../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../faq/ReactRedux.html">
            
                <a href="../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../faq/Miscellaneous.html">
            
                <a href="../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../Troubleshooting.html">
            
                <a href="../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Glossary.html">
            
                <a href="../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../api/">
            
                <a href="../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../api/createStore.html">
            
                <a href="../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../api/Store.html">
            
                <a href="../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../api/combineReducers.html">
            
                <a href="../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../api/applyMiddleware.html">
            
                <a href="../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../api/bindActionCreators.html">
            
                <a href="../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../api/compose.html">
            
                <a href="../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Feedback.html">
            
                <a href="../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Data Flow</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="data-flow">Data Flow</h1>
<p>Redux architecture revolves around a <strong>strict unidirectional data flow</strong>.</p>
<p>This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don&apos;t end up with multiple, independent copies of the same data that are unaware of one another.</p>
<p>If you&apos;re still not convinced, read <a href="../introduction/Motivation.html">Motivation</a> and <a href="https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6" target="_blank">The Case for Flux</a> for a compelling argument in favor of unidirectional data flow. Although <a href="../introduction/PriorArt.html">Redux is not exactly Flux</a>, it shares the same key benefits.</p>
<p>The data lifecycle in any Redux app follows these 4 steps:</p>
<ol>
<li><p><strong>You call</strong> <a href="../api/Store.html#dispatch"><code>store.dispatch(action)</code></a>.</p>
<p>An <a href="Actions.html">action</a> is a plain object describing <em>what happened</em>. For example:</p>
<pre><code class="lang-js"> { type: <span class="hljs-string">&apos;LIKE_ARTICLE&apos;</span>, articleId: <span class="hljs-number">42</span> }
 { type: <span class="hljs-string">&apos;FETCH_USER_SUCCESS&apos;</span>, response: { id: <span class="hljs-number">3</span>, name: <span class="hljs-string">&apos;Mary&apos;</span> } }
 { type: <span class="hljs-string">&apos;ADD_TODO&apos;</span>, text: <span class="hljs-string">&apos;Read the Redux docs.&apos;</span> }
</code></pre>
<p>Think of an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> as a very brief snippet of news. &#x201C;Mary liked article 42.&#x201D; or &#x201C;&#x2018;Read the Redux docs.&apos; was added to the list of todos.&#x201D;</p>
<p>You can call <a href="../api/Store.html#dispatch"><code>store.dispatch(action)</code></a> from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.</p>
</li>
<li><p><strong>The Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a> calls the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function you gave it.</strong></p>
<p>The <a href="Store.html">store</a> will pass two arguments to the <a href="Reducers.html">reducer</a>: the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree and the <a href="../Glossary.html#action" class="glossary-term" title="">action</a>. For example, in the todo app, the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> might receive something like this:</p>
<pre><code class="lang-js"> <span class="hljs-comment">// The current application state (list of todos and chosen filter)</span>
 <span class="hljs-keyword">let</span> previousState = {
   visibleTodoFilter: <span class="hljs-string">&apos;SHOW_ALL&apos;</span>,
   todos: [ 
     {
       text: <span class="hljs-string">&apos;Read the docs.&apos;</span>,
       complete: <span class="hljs-literal">false</span>
     }
   ]
 }

 <span class="hljs-comment">// The action being performed (adding a todo)</span>
 <span class="hljs-keyword">let</span> action = {
   type: <span class="hljs-string">&apos;ADD_TODO&apos;</span>,
   text: <span class="hljs-string">&apos;Understand the flow.&apos;</span>
 }

 <span class="hljs-comment">// Your reducer returns the next application state</span>
 <span class="hljs-keyword">let</span> nextState = todoApp(previousState, action)
</code></pre>
<p> Note that a <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> is a pure function. It only <em>computes</em> the next <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. It should be completely predictable: calling it with the same inputs many times should produce the same outputs. It shouldn&apos;t perform any side effects like API calls or router transitions. These should happen before an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> is dispatched.</p>
</li>
<li><p><strong>The root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> may combine the output of multiple reducers into a single <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree.</strong></p>
<p>How you structure the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> is completely up to you. Redux ships with a <a href="../api/combineReducers.html"><code>combineReducers()</code></a> helper function, useful for &#x201C;splitting&#x201D; the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> into separate functions that each manage one branch of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree.</p>
<p>Here&apos;s how <a href="../api/combineReducers.html"><code>combineReducers()</code></a> works. Let&apos;s say you have two reducers, one for a list of todos, and another for the currently selected filter setting:</p>
<pre><code class="lang-js"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todos</span>(<span class="hljs-params">state = [], action</span>) </span>{
   <span class="hljs-comment">// Somehow calculate it...</span>
   <span class="hljs-keyword">return</span> nextState
 }

 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">visibleTodoFilter</span>(<span class="hljs-params">state = &apos;SHOW_ALL&apos;, action</span>) </span>{
   <span class="hljs-comment">// Somehow calculate it...</span>
   <span class="hljs-keyword">return</span> nextState
 }

 <span class="hljs-keyword">let</span> todoApp = combineReducers({
   todos,
   visibleTodoFilter
 })
</code></pre>
<p>When you emit an <a href="../Glossary.html#action" class="glossary-term" title="">action</a>, <code>todoApp</code> returned by <code>combineReducers</code> will call both reducers:</p>
<pre><code class="lang-js"> <span class="hljs-keyword">let</span> nextTodos = todos(state.todos, action)
 <span class="hljs-keyword">let</span> nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)
</code></pre>
<p>It will then combine both sets of results into a single <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree:</p>
<pre><code class="lang-js"> <span class="hljs-keyword">return</span> {
   todos: nextTodos,
   visibleTodoFilter: nextVisibleTodoFilter
 }
</code></pre>
<p>While <a href="../api/combineReducers.html"><code>combineReducers()</code></a> is a handy helper utility, you don&apos;t have to use it; feel free to write your own root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>!</p>
</li>
<li><p><strong>The Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a> saves the complete <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree returned by the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.</strong></p>
<p>This new tree is now the next <a href="../Glossary.html#state" class="glossary-term" title="">state</a> of your app! Every listener registered with <a href="../api/Store.html#subscribe"><code>store.subscribe(listener)</code></a> will now be invoked; listeners may call <a href="../api/Store.html#getState"><code>store.getState()</code></a> to get the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<p>Now, the UI can be updated to reflect the new <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. If you use bindings like <a href="https://github.com/gaearon/react-redux" target="_blank">React Redux</a>, this is the point at which <code>component.setState(newState)</code> is called.</p>
</li>
</ol>
<h2 id="next-steps">Next Steps</h2>
<p>Now that you know how Redux works, let&apos;s <a href="UsageWithReact.html">connect it to a React app</a>.</p>
<blockquote>
<h5 id="note-for-advanced-users">Note for Advanced Users</h5>
<p>If you&apos;re already familiar with the basic concepts and have previously completed this tutorial, don&apos;t forget to check out <a href="../advanced/AsyncFlow.html">async flow</a> in the <a href="../advanced/">advanced tutorial</a> to learn how <a href="../Glossary.html#middleware" class="glossary-term" title="">middleware</a> transforms <a href="../advanced/AsyncActions.html">async actions</a> before they reach the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.</p>
</blockquote>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Store.html" class="navigation navigation-prev " aria-label="Previous page: Store">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="UsageWithReact.html" class="navigation navigation-next " aria-label="Next page: Usage with React">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Data Flow","level":"1.3.4","depth":2,"next":{"title":"Usage with React","level":"1.3.5","depth":2,"path":"basics/UsageWithReact.md","ref":"./basics/UsageWithReact.md","articles":[]},"previous":{"title":"Store","level":"1.3.3","depth":2,"path":"basics/Store.md","ref":"./basics/Store.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"basics/DataFlow.md","mtime":"2017-03-13T14:28:11.304Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

